<template>
    <div class="person">
        <h2>sum = {{ sum }}</h2>
        <button @click="addSum">sum ++</button>
        <!-- 希望什么标签循环出现，就给什么标签加 v-for -->
        <img v-for="(dog, index) in dogList" :src="dog" :key="index">
        <br>
        <button @click="addDog">添加一只狗</button>
    </div>
</template>

<script setup lang="ts" name="Persona">
/* 
    hook 的使用
    hook 就是为了把不同功能的数据、方法等东西全部按照功能组织在一起，防止出现 vue2 那样的混杂情况而出现的
    hook 组织为一个文件夹，下面有着许多按照功能区分代码的 .ts 文件，命名规范为 usexxx.ts，必须以 use 开头
*/
// 下面这是原本的写法，求和 和 狗 相关的代码全部混杂在 setup 里面，这样是不推荐的
// import { ref, reactive } from 'vue'
// import axios from 'axios'

// let sum = ref(4)
// let dogList: string[] = reactive([])

// function addSum(){
//     sum.value ++
// }
// async function addDog() {
//     try{
//         let result = await axios.get('https://dog.ceo/api/breeds/image/random')
//         // console.log(result)
//         dogList.push(result.data.message)
//     }catch(error){
//         alert(error)
//     }
// }



// 使用了 hooks 以后的语法
import useDog from '@/hooks/useDog'
import useSum from '@/hooks/useSum'

const {dogList, addDog} = useDog()

const {sum, addSum} = useSum()

</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}

button {
    margin-right: 5px;
}

hr {
    border-width: 3px;
    border-color: black;
    border-style: solid;
}

img {
    height: 100px;
    margin-right: 10px;
}
</style>
